<template>
	<view class="my_container">
		<CustomNavbar :title="pageTitle" :style="navbarStyle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_body">
				<view class="background-view-image">
					<u-swiper @click="handleDetail" keyName="content" height="220rpx" :list="bannerList" indicator
						indicatorMode="line" circular radius="24rpx"></u-swiper>
				</view>
				<view class="body_button">
					<view class="body_button_left" :class="active === '1' ? 'button_active' : ''" @tap="change('1')">废纸
					</view>
					<view class="body_button_right" :class="active === '2' ? 'button_active' : ''" @tap="change('2')">废塑
					</view>
				</view>
				<view class="body_item">
					<view class="list_wrap" v-if="dataList.length > 0">
						<scroll-view style="height: 100%" :scroll-y="true" @scrolltolower="handleScroll">
							<view class="show-items-item" v-for="(item, index) in dataList" :key="item.id"
								@tap="gotoDetail(item)">
								<view class="show-items-item-left">
									<image class="show-items-item-image" mode="aspectFill" :src="item.picUrl"></image>
									<view class="show-items-item-image-bontton">
										<image src="../../static/images/time.png"></image>
										<view>{{ item.createTime.substring(0, 10).replace('-', '.').replace('-', '.') }}
										</view>
									</view>
								</view>
								<view class="show-items-item-right">
									<view class="show-items-item-right-one">
										<view :class="[item.resourceType == '1' ? 'active' : '']">
											{{ item.resourceType == '1' ? '出售' : '采购' }}
										</view>
										<view style="font-weight: 600">{{ item.title }}</view>
									</view>
									<view class="show-items-item-right-two">
										{{ item.pubContent }}
									</view>
									<view class="show-items-item-right-four">
										<image src="../../static/images/location.png"></image>
										<view>{{ showLocation(item.province, item.city) }}</view>
										<view>￥{{ item.price ? item.price : '电议' }}</view>
									</view>
									<view class="show-items-item-right-five">
										<image :src="item.briefUserInfo.avatar"></image>
										<view>{{ item.briefUserInfo.nickName }}</view>
										<view style="color: #333">{{ item.briefUserInfo.vipTypeName }}</view>
									</view>
									<view class="show-items-item-right-six">
										<view class="one b-btn">
											<image mode="widthFix" class="b-img" src="../../static/images/view.png">
											</image>
											<view class="b-count">
												{{ item.viewCount == null ? 0 : item.viewCount }}
											</view>
										</view>
										<view @tap.stop="handleCollect(item, index)" class="two b-btn">
											<image v-if="item.collectFlag == '0'" class="b-img"
												src="../../static/images/collect.png"></image>
											<image v-else class="b-img" src="../../static/images/like1.png" />
											<view class="b-count">
												{{ item.collectCount == null ? 0 : item.collectCount }}
											</view>
										</view>
										<view class="three b-btn">
											<image class="b-img" src="../../static/images/message.png"></image>
											<view class="b-count">
												{{ item.commentCount == null ? 0 : item.commentCount }}
											</view>
										</view>
										<view class="four b-btn">
											<image class="b-img" src="../../static/images/zhaunfa.png"></image>
											<button class="share-btn" open-type="share"
												@tap.stop="handShareCountAdd(item, index)"> 分享
												{{ item.shareCount == null ? 0 : item.shareCount }}
											</button>
										</view>
									</view>
								</view>
							</view>
							<uni-load-more :status="status"></uni-load-more>
						</scroll-view>
					</view>
					<u-empty v-else mode="list"></u-empty>
				</view>
			</view>
		</view>
		<!-- 中间加号按钮（浮动在原生 Tab 栏上方） -->
		<view class="center-btn" @click="handleAdd">
			<image src="../../static/images/wyfb.png" class="center-icon" />
		</view>
		<view class="center-btn1">
			<image src="../../static/images/zxkf.png" class="center-icon" />
			<button open-type="contact" bindcontact="handleContact" session-from="sessionFrom"></button>
		</view>
	</view>
</template>
<script>
	import CustomNavbar from '@/components/CustomNavbar.vue';
	import locationFormatter from '@/util/locationFormatter';
	import { mapState } from 'vuex'; // 关键导入
	const api = require('../../util/api.js');
	export default {
		components: {
			CustomNavbar,
		},
		data() {
			return {
				curInd: 1,
				pageTitle: '芬姐推荐',
				showSex: false,
				active: '1',
				feizhiList: [],
				status: 'more',
				tempList: [],
				triggered: false,
				type: '1',
				pageNum: 1,
				pageSize: 10,
				total: 30,
				show: true,
				dataList: [],
				bannerList: [],
				shareTile: ''
			};
		},
		onLoad() {
			this.pageNum = 1;
			this.getDataList();
			this.getBannerList();
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ['shareAppMessage', 'shareTimeline']
			});
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: this.shareTile, //分享的名称
				path: '/pages/zhuanqu/index',
				mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
			};
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '找纸塑网一废纸废塑料AI获客平台',
				type: 0,
				summary: ''
			};
		},
		computed: {
			...mapState(['userInfo', 'pubInfoUserInfo'])
		},
		methods: {
			handleAdd() {
				if (!this.userInfo.userId) {
					uni.navigateTo({ url: '/pages/index/index' });
					return;
				}
				uni.navigateTo({ url: '/page/add/add' });
			},
			showLocation(pro, city) {
				const displayName = locationFormatter.format(pro, city);
				return displayName;
				console.log(displayName); // 输出：浙江杭州
			},
			//点击轮播图
			handleDetail(e) {
				console.log(e, 666);
				if (this.bannerList[e].clickUrl) {
					uni.navigateTo({
						url: `/page/detail/index?id=${this.bannerList[e].clickUrl}`
					});
				}
			},
			//增加分享次数
			handShareCountAdd(item, index) {
				this.shareTile = item.title;
				this.$https.post(this.$api.getPubShareCountAdd, {
					id: item.id
				}).then((res) => {
					if (res.code === 200) {
						this.dataList[index].shareCount = this.dataList[index].shareCount + 1;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//获取轮播图
			getBannerList() {
				this.$https.post(this.$api.getBannerList, {
					bannerType: '10'
				}).then((res) => {
					if (res.code === 200) {
						this.bannerList = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//点赞
			handleCollect(item, index) {
				if (!this.userInfo.userId) {
					return uni.navigateTo({
						url: '/pages/index/index'
					});
				}
				this.$https.post(this.$api.getCourseLike, {
					pubInfoId: item.id,
					operateType: 1,
					processType: item.collectFlag == 0 ? 1 : 0
				}).then((res) => {
					if (res.code === 200) {
						if (item.collectFlag == 0) {
							this.dataList[index].collectFlag = '1';
							this.dataList[index].collectCount++;
						} else {
							this.dataList[index].collectFlag = '0';
							this.dataList[index].collectCount--;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			gotoDetail(item) {
				uni.navigateTo({
					url: `/page/detail/index?id=${item.id}&title=${item.title}`
				});
			},
			detail(item) {
				uni.navigateTo({
					url: `/page/recommendDetail/recommendDetail?id=${item.courseId}`
				});
			},
			change(index) {
				this.active = index;
				this.getDataList();
			},
			handleScroll(e) {
				if (this.status == 'no-more') {
					return;
				} else {
					this.status = 'loading';
					this.pageNum++;
					this.getDataList();
				}
			},
			getDataList() {
				uni.showLoading({
					title: '加载中'
				});
				var requestData = {
					current: this.current,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					product1: this.active == 1 ? '废纸' : '废塑料',
					checkStatus: 2,
					recommendFlag: 1
				};
				this.dataList = [];
				this.$https.post(this.$api.getPubInfoRecommendPage, requestData).then((res) => {
					uni.hideLoading();
					if (res.code === 200) {
						this.total = res.total;
						this.dataList = [...this.dataList, ...res.data];
						if (res.data.length == 0 || res.total <= 10) {
							this.status = 'no-more';
						} else {
							this.status = 'more';
						}
						// uni.hideLoading();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.share-btn {
		font-size: 20rpx;
		width: 100rpx;
		line-height: 37rpx;
	}

	/deep/ .navbar {
		display: flex;
		justify-content: center;
	}

	.my_container {
		width: 100%;
		height: 100%;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-style: normal;
		text-transform: none;

		.center-btn {
			position: fixed;
			bottom: 40rpx;
			/* 原生 Tab 高度 + 安全区域 */
			right: -50rpx;
			transform: translateX(-50%);
			z-index: 9999;
			flex-direction: column;
			display: flex;
			align-items: center;

			.center-icon {
				width: 124rpx;
				height: 124rpx;
			}
		}

		.center-btn1 {
			position: fixed;
			bottom: 200rpx;
			/* 原生 Tab 高度 + 安全区域 */
			right: -25rpx;
			transform: translateX(-50%);
			z-index: 9999;
			flex-direction: column;
			display: flex;
			align-items: center;
			width: 100rpx;
			height: 120rpx;

			.center-icon {
				width: 150rpx;
				height: 120rpx;
			}

			button {
				position: absolute;
				width: 100rpx;
				height: 100rpx;
				background-color: transparent;
			}
		}

		.my_container_body {
			width: 750rpx;
			background: linear-gradient(180deg, #ddffde 0%, #f7f7f7 29%, #f7f7f7 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			height: 100%;

			.my_container_body_head {
				width: 686rpx;
				height: 154rpx;
			}

			.my_container_body_body {
				width: 686rpx;
				padding-top: 40rpx;
				margin-left: 32rpx;
				height: calc(100% - 274rpx);

				.background-view-image {
					width: 686rpx;
					height: 220rpx;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
				}

				.body_button {
					margin-top: 36rpx;
					width: 686rpx;
					height: 90rpx;
					display: flex;
					display: flex;
					justify-content: space-between;
					font-weight: 500;
					font-size: 28rpx;
					text-align: center;
					line-height: 90rpx;

					.body_button_left {
						width: 330rpx;
						height: 90rpx;
						background: #ffffff;
						color: #333333;
						border-radius: 84rpx 84rpx 84rpx 84rpx;
					}

					.body_button_right {
						width: 330rpx;
						height: 90rpx;
						background: #ffffff;
						color: #333333;
						border-radius: 84rpx 84rpx 84rpx 84rpx;
					}

					.button_active {
						background: #1ee825 !important;
						color: #ffffff !important;
					}
				}

				.body_item {
					height: calc(100% - 255rpx);

					// padding-bottom: 80rpx;
					.list_wrap {
						height: 100%;

						.show-items-item {
							width: 686rpx;
							height: 322rpx;
							background: #ffffff;
							border-radius: 24rpx 24rpx 24rpx 24rpx;
							margin-top: 20rpx;
							display: flex;

							.show-items-item-left {
								.show-items-item-image {
									width: 212rpx;
									height: 224rpx;
									margin-top: 28rpx;
									margin-left: 20rpx;
									border-radius: 24rpx;
								}

								.show-items-item-image-bontton {
									height: 70rpx;
									width: 212rpx;
									margin-left: 20rpx;
									display: flex;
									margin-top: 20rpx;

									image {
										width: 36rpx;
										height: 36rpx;
									}

									view {
										width: 128rpx;
										height: 36rpx;
										font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
										font-weight: 400;
										font-size: 24rpx;
										color: #777777;
										margin-left: 4rpx;
									}
								}
							}

							.show-items-item-right {
								margin-left: 20rpx;
								height: 322rpx;

								.show-items-item-right-one {
									display: flex;
									align-items: center;

									:nth-child(1) {
										width: 72rpx;
										height: 40rpx;
										line-height: 40rpx;
										background-color: #556983;
										border-radius: 10rpx;
										margin-top: 38rpx;
										margin-right: 10rpx;
										font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
										font-weight: 400;
										font-size: 18rpx;
										color: #fff;
										text-align: center;
										font-style: normal;
										text-transform: none;
									}

									.active {
										width: 72rpx;
										height: 40rpx;
										line-height: 40rpx;
										background-color: #4fe200;
										border-radius: 10rpx;
										margin-top: 38rpx;
										margin-right: 10rpx;
										font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
										font-weight: 400;
										font-size: 18rpx;
										color: #fff;
										text-align: center;
										font-style: normal;
										text-transform: none;
									}

									:nth-child(2) {
										margin-top: 38rpx;
										width: 340rpx;
										height: 40rpx;
										font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
										font-weight: 500;
										font-size: 28rpx;
										color: #333333;
										line-height: 39rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
										overflow: hidden;
										/* 确保超出部分的文本会被隐藏 */
										text-overflow: ellipsis;
										/* 超出部分显示省略号 */
										display: -webkit-box;
										/* 使用弹性盒子模型 */
										-webkit-line-clamp: 2;
										/* 限制显示两行 */
										-webkit-box-orient: vertical;
										/* 垂直排列子元素 */
									}
								}

								.show-items-item-right-two {
									width: 414rpx;
									height: 68rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 28rpx;
									color: #777777;
									line-height: 34rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
									margin-top: 10rpx;
									overflow: hidden;
									/* 确保超出部分的文本会被隐藏 */
									text-overflow: ellipsis;
									/* 超出部分显示省略号 */
									display: -webkit-box;
									/* 使用弹性盒子模型 */
									-webkit-line-clamp: 2;
									/* 限制显示两行 */
									-webkit-box-orient: vertical;
									/* 垂直排列子元素 */
								}

								.show-items-item-right-four {
									display: flex;
									width: 414rpx;
									height: 44rpx;

									image {
										width: 24rpx;
										height: 26rpx;
										border-radius: 0rpx 0rpx 0rpx 0rpx;
										margin-top: 9rpx;
									}

									:nth-child(2) {
										flex: 1;
										height: 44rpx;
										font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
										font-weight: 400;
										font-size: 24rpx;
										color: #333;
										line-height: 44rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
										padding-left: 4rpx;
									}

									:nth-child(3) {
										width: 180rpx;
										height: 44rpx;
										font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
										font-weight: 600;
										font-size: 24rpx;
										color: #ff4400;
										line-height: 44rpx;
										text-align: right;
										font-style: normal;
										text-transform: none;
									}
								}

								.show-items-item-right-five {
									display: flex;
									width: 414rpx;
									height: 44rpx;

									image {
										width: 40rpx;
										height: 40rpx;
										margin-top: 2rpx;
										border-radius: 24rpx 24rpx 24rpx 24rpx;
										border: 1rpx solid #e4e8ef;
									}

									:nth-child(2) {
										width: 220rpx;
										line-height: 44rpx;
										font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
										font-weight: 400;
										font-size: 24rpx;
										color: #333;
										line-height: 44rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
										padding-left: 10rpx;
									}

									:nth-child(3) {
										width: 154rpx;
										line-height: 44rpx;
										font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
										font-weight: 400;
										font-size: 20rpx;
										color: #ff4400;
										line-height: 44rpx;
										text-align: right;
										font-style: normal;
										text-transform: none;
									}
								}

								.show-items-item-right-six {
									height: 40rpx;
									width: 424rpx;
									display: flex;
									justify-content: space-between;
									margin-top: 30rpx;
									line-height: 40rpx;

									.b-btn {
										display: flex;

										.b-img {
											width: 40rpx;
											height: 40rpx;
										}

										.b-count {
											margin-left: 4rpx;
											font-size: 24rpx;
										}
									}

									.four {
										width: 140rpx;
										position: relative;

										.b-img {
											width: 40rpx;
											height: 36rpx;
											// z-index: 22;
										}

										.share-btn {
											width: 120rpx;
											background-color: transparent;
											padding-left: 40rpx;
											position: absolute;
											font-size: 22rpx;
											line-height: 37rpx;
											top: 0;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>